<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>参保地</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer insureListPage">
      <div class="table-serch-bar">
        <el-form ref="form" :inline="true" :model="form" label-width="55px" size="medium">
          <!--<el-form-item label="参保地">-->
          <!--<el-select placeholder="请输入首字母搜索" v-model="cityName" filterable>-->
          <!--<el-option-->
          <!--v-for="item in options"-->
          <!--:key="item.cityid"-->
          <!--:label="item.name"-->
          <!--:value="item.tags"-->
          <!--&gt;</el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->

          <citySelect labelName="参保地" :p_value.sync="cityName"></citySelect>
          <el-form-item>
            <el-button type="success" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        @selection-change="handleSelectionChange"
        class="my-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column width="50" align="center" type="selection"></el-table-column>
        <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
        <el-table-column min-width="160" align="center" prop="provinceName" label="省份"></el-table-column>
        <el-table-column min-width="160" align="center" prop="cityName" label="城市"></el-table-column>
        <el-table-column min-width="140" align="center" prop="addrName" label="参保地"></el-table-column>
        <el-table-column min-width="120" align="center" prop="socialZYCode" label="社保增员周期"></el-table-column>
        <el-table-column min-width="120" align="center" prop="socialJYCode" label="社保减员周期"></el-table-column>
        <el-table-column min-width="120" align="center" prop="accZYCode" label="公积金增员周期"></el-table-column>
        <el-table-column min-width="120" align="center" prop="accJYCode" label="公积金减员周期"></el-table-column>
        <el-table-column min-width="120" align="center" prop="scope" label="业务范围">
          <template slot-scope="scope">
            <span>{{ getServiceName(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" align="center" prop="createName" label="创建人员"></el-table-column>
        <el-table-column min-width="120" align="center" prop="createTime" label="创建时间"></el-table-column>
      </el-table>
      <div class="table-tools clearfix">
        <div class="fl">
          <el-button type="default" icon="iconfont iconview" size="medium" @click="view()">查看</el-button>
<!--          <el-button type="default" icon="iconfont iconedit" size="medium" @click="edit()">编辑</el-button>-->
          <el-button type="default" icon="iconfont iconadd" size="medium" @click="addInsure">添加</el-button>
          <el-button type="default" icon="iconfont icondelet1" size="medium" @click="delet">删除</el-button>
        </div>
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pageSize"
              layout="prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import citySelect from "../../components/CitySelect";
export default {
  name: "insureList",
  components: {
    citySelect
  },
  data() {
    return {
      checked: true,
      tableData: [],
      selected: [],
      cityName: null,
      form: {
        insureCity: ""
      },
      //搜索框
      pageInfo: {
        total: 0,
        pageSize: 10,
        page: 1
      },
      value: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getServiceName(data) {
      let s1 = data.socialed;
      let s2 = data.accfunded;
      let name1 = s1 ? "社保" : "";
      let name2 = s2 ? "公积金" : "";
      return name1 + "/" + name2;
    },
    getList: function() {
      console.log(this.cityName);
      //let key = this.cityName?this.cityName.split(',')[1]:'';
      Http.api
        .get("/addr/search", {
          params: {
            key: this.cityName,
            page: this.pageInfo.page,
            pageSize: this.pageInfo.pageSize
          }
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.content;
          this.pageInfo.total = res.data.total;
        });
    },
    addInsure() {
      this.$router.push({ path: "/policy/addInsure" });
    },
    handleCurrentChange(val) {
      this.getList();
    },
    onSubmit() {
      this.getList();
    },
    handleSelectionChange: function(val) {
      this.selected = val;
    },
    /**
     * 合并单元格
     * @param row
     * @param column
     * @param rowIndex
     * @param columnIndex
     * @returns {{colspan: number, rowspan: number}}
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        (columnIndex < 5 || columnIndex > 7) &&
        rowIndex < this.tableData.length - 1
      ) {
        console.log(this.tableData.indexOf(row), rowIndex);
        if (this.tableData[rowIndex].id === this.tableData[rowIndex + 1].id) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    // 删除提示
    delet() {
      this.$confirm("确定要删除该参保地吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true
      })
        .then(() => {
          let ids = new Array();
          this.selected.forEach(e => {
            ids.push(e.id);
          });
          Http.api
            .post("addr/del", { ids: ids })
            .then(res => {
              this.$message({
                type: "success",
                message: "已删除"
              });
              this.selected.forEach(e => {
                this.tableData.splice(this.tableData.indexOf(e), 1);
              });
            })

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查看
    view() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据查看");
        return;
      } else {
        this.$router.push({
          path: "/policy/view",
          query: { id: this.selected[0].id }
        });
      }
    },
    // 查看
    edit() {
      if (this.selected.length != 1) {
        this.$message.error("请选择一条数据查看");
        return;
      } else {
        this.$router.push({
          path: "/policy/edit",
          query: { id: this.selected[0].id }
        });
      }
    }
  }
};
</script>



